<template>
    <view class="container">
        <header-nav :config="config" @tabChange="tabChange"></header-nav>
        <date-tab-bar @getNewData="refreshData" background="#fff" />
        <view class="main">
            <swiper v-if="loadOk" class="swiper" :style="{ height: listHeight }" :current="0">
                <swiper-item>
                    <view class="sale-base-info">
                        <view class="turnover-box">
                            <view class="icon-bg"></view>
                            <view class="t-sum"> <text>¥</text>{{ saleStatistics.Total }} </view>
                            <view class="t-name"> 净销售值 </view>
                        </view>
                        <view class="profit-box">
                            <view class="profit-item">
                                <view class="p-sum"><text>¥</text>{{ saleStatistics.MaoriProfit }}</view>
                                <view class="p-other">
                                    <view class="p-name">净利润</view>
                                    <view class="p-icon"></view>
                                </view>
                            </view>
                            <view class="profit-item">
                                <view class="p-sum">{{ saleStatistics.rate }}%</view>
                                <view class="p-other">
                                    <view class="p-name">净利润率</view>
                                    <view class="p-icon p-icon-2"></view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="list-header">
                        <view class="h-item h-name" v-show="searchForm.type == 2">客户名称</view>
                        <view class="h-item h-name" v-show="searchForm.type == 3">业务员名称</view>
                        <view class="h-item h-name" v-show="searchForm.type == 4">仓库名称</view>
                        <view class="h-item h-name" v-show="searchForm.type == 7">商品名称</view>
                        <view
                            class="h-item h-turnover"
                            :class="{ ascending: sort1 == 1, descending: sort1 == 2 }"
                            @tap="changeSort('sort1', 'Total')">
                            净销售额
                            <view class="caret">
                                <view class="sort-caret ascending"></view>
                                <view class="sort-caret descending"></view>
                            </view>
                        </view>
                        <view
                            class="h-item h-profit"
                            :class="{ ascending: sort2 == 1, descending: sort2 == 2 }"
                            @tap="changeSort('sort2', 'MaoriProfit')">
                            利润率
                            <view class="caret">
                                <view class="sort-caret ascending"></view>
                                <view class="sort-caret descending"></view>
                            </view>
                        </view>
                    </view>
                    <cost-list
                        ref="costList"
                        :type="searchForm.type"
                        :height="sublistHeight"
                        @totalBack="waitTotalBack"></cost-list>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
import headerNav from "../components/header-nav.vue"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import tabBar from "../components/tab-bar.vue"
import dateTabBar from "../components/date-tab-bar.vue"
import costList from "./cost-list.vue"
import { getSaleStatistics } from "@/service/api/erp.js"
import chooseDate from "../components/choose-date.vue"
import { mapState } from "vuex"

export default {
    components: {
        headerNav,
        costList,
        tabBar,
        chooseDate,
        dateTabBar,
    },
    computed: {
        ...mapState("report", ["startDate", "endDate", "selectedSalesman"]),
    },
    data() {
        return {
            config: {
                centerSlot: true,
                rightSlot: false,
                color: ["#333333"],
                rightBtns: [],
                tabs: [
                    {
                        title: "客户",
                    },
                    {
                        title: "业务员",
                    },
                    {
                        title: "仓库",
                    },
                    {
                        title: "商品",
                    },
                ],
            },
            listHeight: "",
            sublistHeight: "",
            loadOk: true,
            tabIndex: 0,
            waitTotal: 0,
            total: 0,
            sorts: ["sort1", "sort2"],
            sort1: 0, // 销量排序
            sort2: 0, // 利润排序
            searchForm: {
                type: "2", // 切换的类型 2：客户 3：业务员 4：仓库 7:商品
                sortType: 0, // 0：不排序；1：升序；2：降序
                sortColumn: "", // Total 净销售额  MaoriProfit 净利润
            },
            saleStatistics: {}, // 销售统计
        }
    },
    onLoad() {
        this.judgeShowCustomTab()
    },
    created() {
        let mainColor = this.easyGetColor("white")
        this.config.backgroundColor = [1, mainColor]
    },
    mounted() {
        this.getListHeight()
        setTimeout(() => {
            if (this.$refs.costList) {
                this.$refs.costList.refresh(this.searchForm)
            }
        }, 300)
    },
    onShow() {
        this.init()
    },
    methods: {
        refreshData() {
            this.init()
            this.setList()
        },
        judgeShowCustomTab() {
            if (this.selectedSalesman) {
                // 如果选了业务员，那么隐藏业务员切换标签
                this.config.tabs.splice(1, 1)
            }
        },
        init() {
            const params = {
                startDate: this.startDate,
                endDate: this.endDate,
                type: this.searchForm.type,
            }
            if (this.selectedSalesman) {
                params.eCodeArr = [this.selectedSalesman.UserCode]
            }
            getSaleStatistics(params).then((res) => {
                if (res.State == 1) {
                    this.saleStatistics = res.Data
					if(this.saleStatistics.CostTotal==0){
						this.saleStatistics.CostTotal = 1
					}
                    this.saleStatistics.rate = (
                        (this.saleStatistics.MaoriProfit / this.saleStatistics.CostTotal) *
                        100
                    ).toFixed(2)
                    if (isNaN(this.saleStatistics.rate)) {
                        this.saleStatistics.rate = 0
                    }
                }
            })
        },
        // 重置列表
        setList() {
            this.$refs.costList.refresh(this.searchForm)
        },
        tabChange(e) {
            if (this.selectedSalesman) {
                // 如果选了业务员，业务员隐藏了，顺序也变了
                if (e == 0) {
                    this.searchForm.type = "2"
                } else if (e == 1) {
                    this.searchForm.type = "4"
                } else if (e == 2) {
                    this.searchForm.type = "7"
                }
            } else {
                if (e == 0) {
                    this.searchForm.type = "2"
                } else if (e == 1) {
                    this.searchForm.type = "3"
                } else if (e == 2) {
                    this.searchForm.type = "4"
                } else if (e == 3) {
                    this.searchForm.type = "7"
                }
            }
            this.refreshData()
        },
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e + "px"
                this.sublistHeight = e - uni.upx2px(484) + "px"
                this.loadOk = true
            })
        },
        waitTotalBack() {},
        changeSort(type, name) {
            let otherSorts = this.sorts.filter((res) => res != type)
            otherSorts.forEach((element) => {
                this[element] = "0"
            })
            if (this[type] == 2) {
                this[type] = 0
            } else {
                this[type]++
            }
            this.searchForm.sortType = this[type]
            this.searchForm.sortColumn = name
            this.$refs.costList.refresh(this.searchForm)
        },
    },
}
</script>

<style lang="scss">
.sale-base-info {
    display: flex;
    height: 332rpx;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    margin: $app-page-padding;

    .turnover-box {
        display: flex;
        flex-flow: column;
        flex: 1;
        justify-content: center;
        align-items: center;
        margin-right: 22rpx;
        height: 332rpx;
        background: #ffffff;
        box-shadow: 0px 5px 14px 0px rgba(0, 0, 0, 0.06);
        border-radius: 22rpx;

        .icon-bg {
            width: 64rpx;
            height: 64rpx;
            border-radius: 24rpx;
            margin-bottom: 32rpx;
            background: url("~@/static/img/erp/icon_jxz_tm.png") no-repeat $app-color-main center;
            background-size: 24px;
        }

        .t-sum {
            margin-bottom: 24rpx;
            font-size: $size-40;
            font-weight: bold;

            text {
                font-size: $size-24;
                font-weight: normal;
            }
        }

        .t-name {
            font-size: $size-28;
            color: $color-gray-3;
        }
    }

    .profit-box {
        flex: 1;
        display: flex;
        flex-flow: column;
        justify-content: inherit;

        .profit-item {
            box-sizing: border-box;
            padding: 24rpx 28rpx 0 28rpx;
            height: 156rpx;
            background: #ffffff;
            box-shadow: 0px 5px 14px 0px rgba(0, 0, 0, 0.06);
            border-radius: 22rpx;

            .p-sum {
                font-size: $size-40;
                font-weight: bold;

                text {
                    font-size: $size-24;
                    font-weight: normal;
                }
            }

            .p-other {
                display: flex;
                align-items: flex-end;
                justify-content: space-between;

                .p-name {
                    font-size: $size-24;
                    color: $color-gray-3;
                }

                .p-icon {
                    width: 48rpx;
                    height: 48rpx;
                    border-radius: 18rpx;
                    background: url("~@/static/img/erp/icon_jlr_tm.png") no-repeat #3d87fe center;
                    background-size: 18px;

                    &.p-icon-2 {
                        background: url("~@/static/img/erp/icon_jlrl_tm.png") no-repeat #ef9604 center;
                        background-size: 18px;
                    }
                }
            }
        }
    }
}

.list-header {
    display: flex;
    align-items: center;
    height: 104rpx;
    background: #ffffff;
    box-shadow: 0px 6rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
    border-radius: 24px 24rpx 0rpx 0rpx;
    margin: 0 $app-page-padding;
    position: relative;
    z-index: 1;

    .h-item {
        text-align: center;
        font-size: $size-28;
        font-weight: bold;

        &.h-name {
            flex: 1;
            padding-left: 24rpx;
            text-align: left;
        }

        &.h-turnover {
            width: 220rpx;
        }

        &.h-profit {
            width: 180rpx;
        }

        &.ascending {
            .caret {
                .sort-caret {
                    &.ascending {
                        border-bottom-color: $app-color-main;
                    }
                }
            }
        }

        &.descending {
            .caret {
                .sort-caret {
                    &.descending {
                        border-top-color: $app-color-main;
                    }
                }
            }
        }

        .caret {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            height: 34px;
            width: 24px;
            vertical-align: middle;
            cursor: pointer;
            overflow: initial;
            position: relative;

            .sort-caret {
                width: 0;
                height: 0;
                border: 5px solid transparent;
                position: absolute;
                left: 7px;

                &.ascending {
                    border-bottom-color: #434c67;
                    top: 5px;
                }

                &.descending {
                    border-top-color: #434c67;
                    bottom: 7px;
                }
            }
        }
    }
}
</style>
